@charset "UTF-8";

/**
 * Fonts
 */
@font-face {
  font-family: "Fira Sans";
  src:
    local("Fira Sans Regular"),
    local("FiraSans-Regular"),
    local("Fira Sans Book"),
    local("FiraSans-Book"),
    url("fonts/firasans-book.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-stretch: normal;
  font-weight: 400;
}

@font-face {
  font-family: "Fira Sans";
  src:
    local("Fira Sans Bold"),
    local("FiraSans-Bold"),
    url("fonts/firasans-bold.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-stretch: normal;
  font-weight: 700;
}

@font-face {
  font-family: "Fira Sans";
  src:
    local("Fira Sans Regular Italic"),
    local("FiraSans-RegularItalic"),
    local("Fira Sans Book Italic"),
    local("FiraSans-BookItalic"),
    url("fonts/firasans-bookitalic.woff2") format("woff2");
  font-display: swap;
  font-style: italic;
  font-stretch: normal;
  font-weight: 400;
}

/**
 * Base
 */
html {
  --font-stack: Fira Sans, Helvetica Neue, Arial, Nimbus Sans L, sans-serif, Segoe UI Emoji, Segoe UI Symbol;
  --type-scale: 1.125;
  --h5: calc(1rem * var(--type-scale));
  --h4: calc(var(--h5) * var(--type-scale));
  --h3: calc(var(--h4) * var(--type-scale));
  --h2: calc(var(--h3) * var(--type-scale));
  --h1: calc(var(--h2) * var(--type-scale));
  box-sizing: border-box;
  overflow-y: scroll;
  scroll-padding-top: 1rem;
}

@media (min-width: 48rem) {
  html {
    --type-scale: 1.25;
  }
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-delay: -1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    transition-delay: -1ms !important;
    scroll-behavior: auto !important;
    background-attachment: initial !important;
  }
}

*,
*::after,
*::before {
  box-sizing: inherit;
}

::selection {
  background-color: #ffce00;
  color: #483d23;
  text-shadow: none;
}

:focus {
  outline: .125rem solid currentColor;
  outline-offset: .25rem;
  isolation: isolate;
}

:focus:not(:focus-visible) {
  outline-color: transparent;
  isolation: auto;
}

:focus-visible {
  outline-color: currentColor;
  outline-offset: .25rem;
  isolation: isolate;
}

@media (hover: hover) {
  body:hover [tabindex="-1"]:focus {
    outline-color: transparent;
    isolation: auto;
  }
}

/**
 * Layout
 */
body {
  background-color: #f7f7f7;
  background-image: url("data:image/svg+xml,%3Csvg width='56' height='28' viewBox='0 0 56 28' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M56 26c-2.813 0-5.456.726-7.752 2H56v-2zm-26 2h4.087C38.707 20.783 46.795 16 56 16v-2c-.672 0-1.339.024-1.999.07L54 14a2 2 0 0 1 2-2v-2a4 4 0 0 0-3.98 3.602 28.087 28.087 0 0 0-2.793-3.862A7.994 7.994 0 0 1 56 6V4a9.988 9.988 0 0 0-8.17 4.232 28.156 28.156 0 0 0-3.03-2.634A13.979 13.979 0 0 1 56 0h-7.752a16.078 16.078 0 0 0-5.09 4.454 27.941 27.941 0 0 0-3.536-1.936c.63-.896 1.33-1.738 2.095-2.518H39.03c-.46.557-.893 1.137-1.297 1.737A27.787 27.787 0 0 0 33.723.585c.12-.196.24-.392.364-.585H30l-.001.07A28.406 28.406 0 0 0 26 .07L26 0h-4.087c.124.193.245.389.364.585a27.787 27.787 0 0 0-4.009 1.152c-.404-.6-.837-1.18-1.297-1.737h-2.688c.764.78 1.466 1.622 2.095 2.518-1.23.562-2.41 1.21-3.536 1.936A16.078 16.078 0 0 0 7.752 0H0c4.58 0 8.645 2.199 11.2 5.598a28.156 28.156 0 0 0-3.03 2.634A9.988 9.988 0 0 0 0 4v2a7.994 7.994 0 0 1 6.773 3.74 28.087 28.087 0 0 0-2.793 3.862A4 4 0 0 0 0 10v2a2 2 0 0 1 1.999 2.07C1.339 14.024.672 14 0 14v2c9.205 0 17.292 4.783 21.913 12H26a2 2 0 1 1 4 0zM7.752 28C5.456 26.726 2.812 26 0 26v2h7.752zM56 20c-6.832 0-12.936 3.114-16.971 8h2.688A19.94 19.94 0 0 1 56 22v-2zm-39.029 8C12.936 23.114 6.831 20 0 20v2a19.94 19.94 0 0 1 14.283 6h2.688zm15.01-.398a28.087 28.087 0 0 1 2.792-3.862A7.994 7.994 0 0 0 28 20a7.994 7.994 0 0 0-6.773 3.74 28.087 28.087 0 0 1 2.793 3.862 4 4 0 0 1 7.96 0zm14.287-11.865C42.318 9.864 35.61 6 28 6c-7.61 0-14.318 3.864-18.268 9.737a27.787 27.787 0 0 0-4.009-1.152C10.275 7.043 18.548 2 28 2c9.452 0 17.725 5.043 22.277 12.585a27.787 27.787 0 0 0-4.009 1.152zm-5.426 2.717a27.941 27.941 0 0 1 3.536-1.936C40.76 11.367 34.773 8 28 8s-12.76 3.367-16.378 8.518c1.23.562 2.41 1.21 3.536 1.936C18.075 14.537 22.741 12 28 12s9.925 2.537 12.842 6.454zm-4.672 3.778a28.156 28.156 0 0 1 3.03-2.634A13.979 13.979 0 0 0 28 14c-4.58 0-8.645 2.199-11.2 5.598a28.156 28.156 0 0 1 3.03 2.634A9.988 9.988 0 0 1 28 18a9.988 9.988 0 0 1 8.17 4.232z' fill='%23f3f3f3' fill-opacity='1' fill-rule='evenodd'/%3E%3C/svg%3E");
  background-size: 6rem 3rem;
  color: #3e4b55;
  font-family: var(--font-stack);
  counter-reset: titles;
  margin: 0;
  min-height: 100vh;
  padding-top: 2rem;
  -webkit-font-smoothing: subpixel-antialiased;
  text-rendering: optimizeSpeed;
}

header {
  align-items: center;
  display: flex;
  flex-direction: column;
}

main {
  background: #fcf9e9;
  border: 1px solid #e5dec8;
  border-radius: .25rem 0 0 .25rem;
  border-right: 0;
  overflow-x: hidden;
  padding: 0 1rem;
}

main > * + * {
  margin-bottom: 3rem;
  max-width: 70ch;
}

footer {
  display: flex;
  flex-wrap: wrap;
  grid-column: 2;
}

footer div {
  display: flex;
  flex: 1 0 100%;
  justify-content: space-between;
}

aside {
  align-items: flex-end;
  display: flex;
  flex-direction: column;
  padding-top: 2rem;
}

aside > * {
  max-width: calc(100vw - 2rem);
}

img,
iframe {
  max-width: 100%;
}

@media (min-width: 30rem) {
  main {
    padding: 0 0 0 2rem;
  }
}

@media (min-width: 48rem) {
  body {
    display: grid;
    gap: 2rem;
    grid-template-columns: minmax(15rem, 33vw) 1fr;
  }

  header {
    display: contents;
  }

  [id="skip-links"] {
    grid-column: 1 / span 2;
  }

  aside > * {
    width: 15rem;
  }
}

/* Type scale */
p,
ul,
ol,
dl,
blockquote,
pre,
td,
th,
textarea {
  font-size: 1rem;
  line-height: 1.5;
  margin: 1.5rem 0;
}

h1, h2, h3,
h4, h5, h6 {
  line-height: 1.25;
  margin: 1.5rem 0 .75rem;
}

h1 {
  font-size: var(--h1);
}

h2[id] {
  background-color: #fcf9e9;
  counter-increment: titles;
  font-size: var(--h2);
  padding: 0 0 0 1.25ch;
  position: relative;
  width: max-content;
  z-index: 1;
}

article:nth-of-type(9) ~ article h2[id] {
  padding: 0 0 0 2ch;
}

h2[id]::after,
h2[id]::before {
  bottom: 0;
  content: "";
  position: absolute;
  top: 0;
}

h2[id]::after {
  background-color: inherit;
  color: #e5dec8;
  content: counter(titles) ".";
  font-style: italic;
  font-weight: 400;
  left: -1rem;
  right: -1rem;
  text-indent: .5rem;
  z-index: -1;
}

h3 {
  font-size: var(--h3);
}

h4 {
  font-size: var(--h5);
}

h5 {
  font-size: var(--h5);
}

li :is(p, ul) {
  margin-top: 0;
  margin-bottom: 0;
}

textarea,
table,
td,
th,
samp,
div,
p {
  hyphenate-limit-chars: 6 3 2;
  hyphenate-limit-lines: 2;
  hyphenate-limit-last: always;
  hyphenate-limit-zone: 8%;
  hyphens: auto;
  word-wrap: break-word;
}

article > ul a {
  display: inline-block;
  overflow-wrap: anywhere;
  vertical-align: top;
}

@media (min-width: 30rem) {
  h2[id]::before {
    background-color: #ece7d4;
    background-image:
      radial-gradient( rgba( 0, 0, 0, .05 ) 15%, transparent 16%),
      radial-gradient( rgba( 0, 0, 0, .05 ) 15%, transparent 16%);
    background-position: 0 0, .25rem .25rem;
    background-size: .5rem .5rem;
    left: -2rem;
    min-width: 15rem;
    width: 100vw;
    z-index: -2;
  }
}

@media (min-width: 48rem) {
  h2[id]::before {
    width: 67vw;
  }
}

/* Tables */
table {
  border-collapse: collapse;
  margin-bottom: 1.5rem;
  width: 100%;
}

th,
td {
  padding: .75rem;
  text-align: left;
  vertical-align: top;
}

thead th {
  border-bottom: .125rem solid #e5dec8;
  color: #483d23;
}

tbody :is(th, td) {
  border-bottom: 1px solid #e5dec8;
  color: #7b6e50;
}

tbody th {
  color: #3e4b55;
  font-weight: 400;
}

td {
  line-height: 1.25;
  max-width: 100%;
}

td p {
  margin: 0;
}

/* Code */
code {
  line-height: 1;
}

pre {
  color: #032c36;
  direction: ltr;
  font-family: monospace;
  font-size: calc(1rem / var(--type-scale));
  hyphens: none;
  tab-size: 4;
  overflow-x: auto;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
}

:is(p, ul, th, td) code {
  border: 1px solid;
  border-radius: .2em;
  display: inline-block;
  font-family: inherit;
  padding: .1em;
  white-space: nowrap;
}

/* Blockquotes */
/* @see https://github.com/tetue/tinytypo/blob/fc1a3a90d2ffefeaed2bf4dcee0fb88320c65348/css/typo.css#L424 */
blockquote {
  border-left: .25rem solid #ece7d4;
  color: #7b6e50;
  font-style: italic;
  padding-left: 2rem;
  quotes: "\201C" "\201D" "\2018" "\2019";
}

blockquote::before {
  content: open-quote;
  margin-left: -1rem;
}

blockquote::after {
  content: close-quote;
}

blockquote p {
  display: inline;
}

blockquote :is(em, code, strong) {
  color: #483d23;
  font-style: normal;
}

/* Links */
a {
  color: #3462af;
  outline-offset: 2rem;
  text-decoration-skip-ink: auto;
  transition: outline-offset .3s cubic-bezier(0, .5, .5, 1);
}

main a:visited {
  color: rebeccapurple;
}

a:is(:hover, :focus) {
  color: #093785;
  outline-color: transparent;
  text-decoration: none;
}

a:focus-visible {
  outline-color: currentcolor;
}

a:active {
  color: rebeccapurple;
  outline-color: transparent;
}

a[href="#skip-links"]::after {
  content: "\A0⇪";
}


/**
 * Components
 */

/* Logo */
[id="logo"] {
  color: #483d23;
  padding-right: 1rem;
  text-align: right;
}

[id="logo"]:is(:hover, :focus) {
  color: #911;
}

/* Box */
.box {
  background: white;
  border: 1px solid lightGray;
  box-shadow: inset 0 0 0 .25rem rgba( 0, 0, 0, .05 );
  padding: 1rem;
}

.box ul {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  margin-bottom: 0;
}

.box li + li {
  margin-left: 2rem;
}

aside .box {
  border-radius: .25rem 0 0 .25rem;
  border-right: 0;
  margin: 0 -2rem 2rem -1rem;
  min-width: 18rem;
}

.box-title {
  font-size: var(--h5);
  line-height: 1.5;
  font-weight: bold;
  margin: 0;
}

/* Main navigation */
.nav {
  align-self: center;
}

.nav ul {
  display: flex;
  flex-flow: row wrap;
}

.nav a {
  display: inline-block;
  padding: .75rem 1rem;
  position: relative;
  text-decoration: none;
}

/**
 * @note Un petit effet « kikoo lol », avec quelques variantes.
 * @author Manoela Ilic a.k.a. Mary Lou @codrops
 * @see http://tympanus.net/codrops/2013/08/06/creative-link-effects/
 * @see http://tympanus.net/Development/CreativeLinkEffects/#cl-effect-12
 */
.nav a::after,
.nav a::before {
  --scale: .2;
  border: 2px solid var(--background, currentColor);
  border-radius: var(--radius, .25rem);
  content: "";
  height: var(--size, 3rem);
  left: 50%;
  opacity: 0;
  position: absolute;
  top: 50%;
  transition: transform .3s, opacity .3s;
  transform: translate3d( -50%, -50%, 0 ) scale(var(--scale)) rotate(var(--turn, 0deg));
  width: var(--size, var(--width, calc( 100% - .5em )));
  z-index: -1;
}

.nav a::after {
  --scale: .8;
  background: var(--background, currentColor);
  border: 0;
  height: var(--size, 2.5rem);
  width: var(--size, var(--after-width, calc( 100% - 1em )));
}

.index {
  --color: #039be5;
}

.errors {
  --radius: 50%;
  --size: 4rem;
  --color: #911;
}

.errors::after {
  --size: 3.25rem;
}

.warnings {
  --turn: 45deg;
  --color: #000;
  --width: 3rem;
  --after-width: 2.5rem;
  --background: #ffce00;
}

.obsolete {
  --color: RoyalBlue;
  --width: 3rem;
  --after-width: 2.5rem;
}

.advices {
  --color: OliveDrab;
}

.nav a:is(:hover, :focus, [aria-current="page"]) {
  color: var(--color, #3462af);
}

.nav a:where(:hover, :focus, [aria-current="page"])::after,
.nav a:where(:hover, :focus, [aria-current="page"])::before {
  --scale: 1;
  opacity: .1;
}

.warnings:is(:hover, :focus, [aria-current="page"])::after,
.warnings:is(:hover, :focus, [aria-current="page"])::before {
  --color: #ffce00;
  opacity: .3;
}

/* Table of contents */
[id="toc"] ol {
  list-style-position: outside;
  padding: 0;
}

[id="toc"] ul ol {
  margin: .75rem 0 2rem;
}

[id="toc"] li {
  margin: .25rem 0 .5rem;
}

[id="toc"] ul > li > a {
  font-size: var(--h4);
  font-weight: bold;
}

[id="toc"] ol a {
  display: inline-block;
  position: relative;
  vertical-align: top;
}

[id="toc"] [aria-current="true"]::before {
  content: "➜";
  left: -2.5em;
  position: absolute;
}

/* Code blocks */
.pre {
  background: #fffef9;
  border: 1px solid #e5dec8;
  border-radius: .25rem;
  position: relative;
}

.pre + .pre {
  border-radius: 0 0 .25rem .25rem;
  margin-top: -.25rem;
}

.pre + .pre code::before {
  border-top-left-radius: 0;
}

.pre > div {
  background: #fff;
  margin: 2em 0 0;
  padding: 1em;
}

.pre pre {
  margin: 0;
  padding: 1em;
}

.pre pre:not(:first-child) {
  border-top: 1px solid #e5dec8;
}

.pre pre:only-child code {
  display: block;
  margin: 2.5em 0 0;
}

.pre code::before {
  background: #fcf9e9;
  border: 1px solid #e5dec8;
  border-radius: .25rem 0 .25rem 0;
  color: #7b6e50;
  content: attr(data-language);
  font-family: var(--font-stack);
  font-style: italic;
  left: -1px;
  padding: .5em 1em;
  position: absolute;
  top: -1px;
}

.pre img,
.pre svg,
.pre input,
.pre iframe {
  vertical-align: bottom;
}

/* Footer */
.builtWith {
  border-top: 0;
  margin: -2rem 2rem 0 auto;
  padding: 1rem;
  width: fit-content;
}

/* Contents */
form label {
  min-width: 1em;
}

#empty-link_code,
#empty-title_code,
#empty-node_code {
  display: inline-block;
  min-height: 1em;
  min-width: 1em;
}

#check-alt-0 {
  display: none;
}

header svg[aria-hidden="true"]:not(:empty),
footer svg[aria-hidden="true"]:not(:empty) {
  counter-increment: unset !important;
  outline: none !important;
}

/* Helpers */
.list-unstyled {
  list-style: none;
  padding: 0;
}

@media (max-width: 48rem) {
  .hidden-sm {
    display: none;
  }
}

/*
  Improved screen reader only CSS class
  @author Gaël Poupard
    @note Based on Yahoo!'s technique
    @author Thierry Koblentz
    @see https://developer.yahoo.com/blogs/ydn/clip-hidden-content-better-accessibility-53456.html
  * 1.
    @note `clip` is deprecated but works everywhere
    @see https://developer.mozilla.org/en-US/docs/Web/CSS/clip
  * 2.
    @note `clip-path` is the future-proof version, but not very well supported yet
    @see https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path
    @see http://caniuse.com/#search=clip-path
    @author Yvain Liechti
    @see https://twitter.com/ryuran78/status/778943389819604992
  * 3.
    @note preventing text to be condensed
    author J. Renée Beach
    @see https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
    @note Drupal 8 goes with word-wrap: normal instead
    @see https://www.drupal.org/node/2045151
    @see http://cgit.drupalcode.org/drupal/commit/?id=5b847ea
  * 4.
    @note !important is important
    @note Obviously you wanna hide something
    @author Harry Roberts
    @see https://csswizardry.com/2016/05/the-importance-of-important/
*/
.sr-only,
.sr-only-focusable:not(:focus):not(:focus-within) {
  border: 0 !important;
  clip: rect(1px, 1px, 1px, 1px) !important; /* 1 */
  clip-path: inset(50%) !important; /* 2 */
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
  white-space: nowrap !important; /* 3 */
}
